<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-背景颜色</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      /* 默认属性 透明的 清澈的 */
      /* background-color: transparent; */
      background-color: pink;
    }

    .img {
      width: 420px;
      height: 400px;
      /* 1. 设置背景图片：不要落下 url() */
      background-image: url(active.png);
      /* 背景图片默认情况是平铺的 */

      /* 2. 设置不平铺 */
      /* background-repeat: no-repeat; */

      /* 3. 设置沿着x轴平铺 */
      /* background-repeat: repeat-x; */

      /* 4. 设置沿着y轴平铺 */
      background-repeat: repeat-y;

      /* 页面元素可以添加背景颜色也可以添加背景图片 不够背景图片会压住背景颜色 */
    }

    .img2 {
      width: 420px;
      height: 400px;
      background-color: pink;
      background-image: url(active.png);
      background-repeat: no-repeat;


      /* background-position: 方位名词 与顺序无关 */
      /* 1. 水平居中 靠上 */
      /* background-position: center top; */

      /* 2. 水平居中 靠右 */
      /* background-position: center right; */

      /* 3. 靠右 水平居中 */
      /* background-position: right center; */

      /* 4. 靠上 : 如果只指定一个方位名词另一个默认居中对齐*/
      background-position: top;

    }
  </style>
</head>

<body>

  <div></div>

  <br>

  <div class="img"></div>

  <br>

  <div class="img2"></div>

</body>

</html>